<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平滑翻页</title>
    <link rel="stylesheet" type="text/css" href="css/06.css"/>

</head>
<body>
<div id="container">
    <div id="list">
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/06.js"></script>
<script type="text/javascript" src="js/06-moveAnimation.js"></script>
</body>
</html>